결합자는 두 개 이상의 <compound-selector>가 결합하는 관계를 나타낸다. 결합자는 복합적으로 사용될 수 있다. 결합 관계에서 맨 끝쪽의 선택자에 일치하는 요소가 스타일 적용 대상이 된다.
| 기호 | 결합 관계 | 설명 | 사용 예 |
|---|---|---|---|
| ">" | 부모 > 자식 | 두 요소 사이의 하위 관계를 나타낸다. | .header > span |
| "+" | 형제 + 다음 형제 | 동등 관계를 가지며 바로 뒤의 요소를 나타낸다. | h1.title + h2 |
| "~" | 형제 ~ 이후의 모든 형제 | 동등 관계를 가지며 이후의 모든 요소를 나타낸다. | h1 ~ pre |
| "||" | 기준 열(column) || 대상 열(column) | 기준 요소가 속하는 열(column)에 대상 열(column)이 속해 있는 경우를 나타낸다. 현재 웹브라우저의 지원 현황을 확인할 필요가 있다. | col.selected || td |
'>' | '+' | '~' | [ '|' '|' ]
| Modules | ||
|---|---|---|
| Module Name | Status | Summary |
| Selectors Level 4 | Last review date: 2023-2-23 | |
